<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px'}">
		
		<navBar title="退款进度" />
		
		<!-- 退款信息 -->
		<view class="c-info">
			<view class="ci-bottom">
				<view class="cib-list">
					<view class="cibl-label">订单编号：</view>
					<view class="cibl-value">{{ info.refundOrderNo }}</view>
				</view>
				<view class="cib-list">
					<view class="cibl-label">退款原因：</view>
					<view class="cibl-value">{{ info.refundReason }}</view>
				</view>
				<view class="cib-list">
					<view class="cibl-label">退款进度：</view>
					<view class="cibl-value" style="color: #CF1A1B;">
						<!-- 1:待审核；3:退款中；4：退款关闭；5:退款成功 -->
						<!-- 门店待审核：1 待审核：3 退款中：6 退款成功：5 退款关闭：4，7 -->
						<!-- {{ info.orderState === 6 ? '退款审核已通过' : info.orderState === 5 ? '退款成功' : '' }} -->
						{{ getOrderState(info.orderState) }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退款明细  -->
		<view class="c-money">
			<view class="c-title">退款明细</view>
			<view class="cm-content">
				<view class="cm-jer">
					<view class="cmj-label">在线支付：</view>
					<view class="cmj-value">
						<text style="color: #CF1A1B; margin-right: 10rpx;">￥{{ info.refundMoney && info.refundMoney.toFixed(2) || 0.00 }}</text>
						(3-7个工作日到账)
					</view>
				</view>
				<view class="cm-tips">
					<view class="cmt-tag"></view>
					<view class="cmt-text">
						退款将您实际支付的金额原路退还，优惠券、积分等资产将也将返还，时效可通过客服查询。
					</view>
				</view>
			</view>
		</view>
		
		<!-- 步骤条 -->
		<view class="cm-border">
				<u-steps
					:current="stepActive"
					activeColor="#CF1A1B"
					direction="column"
					:dot="true"
				>
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 5"
						:title="detailStep[4].detail"
						:desc="detailStep[4].createdTime"
					>
					</u-steps-item>
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 4"
						:title="detailStep[3].detail"
						:desc="detailStep[3].createdTime"
					></u-steps-item>
					<u-steps-item v-if="detailStep.length >= 3" propsClass="csi-item-line">
						<view slot="desc" class="step-slot" >
							<view v-if="info.orderState === 4" class="custom-slot" :style="{ color: (info.orderState === 4 || info.orderState === 7) ? '#CF1A1B' : ''}">
								{{ (info.orderState === 4 || info.orderState === 7) ? '退款关闭' : info.orderState === 5 ? '退款成功' : '' }}
							</view>
							<view class="custom-slot">
								{{ detailStep[2].detail }}
							</view>
							<view>{{ detailStep[2].createdTime }}</view>
						</view>
					</u-steps-item>
					<!-- <u-steps-item v-if="detailStep.length === 3">
						<view slot="desc" class="step-slot" >
							<view class="custom-slot">
								{{ detailStep[2].detail }}
							</view>
							<view>{{ detailStep[2].createdTime }}</view>
						</view>
					</u-steps-item> -->
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 2"
						:title="detailStep[1].detail"
						:desc="detailStep[1].createdTime"
					></u-steps-item>
					<u-steps-item
						propsClass="csi-item-line"
						v-if="detailStep.length >= 1"
						:title="detailStep[0].detail"
						:desc="detailStep[0].createdTime"
					></u-steps-item>
				</u-steps>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import goodsDefault from '@/static/goods_default_square.png'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				goodsDefault,
				paddingTop: '',
				stepCurrent: 0,
				info: {},
				stepActive: 0,
				detailStep: []
			};
		},
		computed: {
			// 订单状态
			getOrderState(){
				return (state) => {
					// 1:待审核；3:待审核；4：退款关闭；5:退款成功；6:退款中；7:退款关闭
					switch(state){
						case 6:
							return '退款审核已通过'
						case 5:
							return '退款成功'
						case 3:
							return '待审核'
						case 1:
							return '待审核'
						default:
							return ''
					}
				}
			},
		},
		methods: {
			async getDetail(id){
				uni.showLoading({
					title: '加载中...'
				})
				try {
					const res = await this.$request({
						method: 'GET',
						url: `/order-center/carOwner/refund/orders/${id}`,
					})
					this.info = res.datas
					
					// 退款订单状态, 1:待审核；3:退款中；4：退款关闭；5:退款成功
					this.stepCurrent = this.info.orderState === 1
					if(this.info.orderState === 1){
						this.stepCurrent = 0
					}else if(this.info.orderState === 4 || this.info.orderState === 5){
						this.stepCurrent = 2
					}
					
					this.detailStep = this.info.logs || []
					this.stepActive = this.detailStep.length === 3 ? 2 : this.detailStep.length === 2 ? 1 : 0
					
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			}
		},
		onLoad(query){
			const { id } = query
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			this.getDetail(id)
		}
	}
</script>

<style lang="scss" scoped>
.container {
	
	.c-info {
		background-color: #ffffff;
		.ci-bottom {
			box-sizing: border-box;
			padding: 32rpx;
			.cib-list {
				display: flex;
				font-size: 14px;
				margin-bottom: 32rpx;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				.cibl-label {
					color: rgba(0, 0, 0, 0.65);
				}
				.cibl-value {
					flex: 1;
					margin-left: 64rpx;
					color: rgba(0, 0, 0, 0.85);
					word-wrap: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	
	.c-money {
		margin-top: 20rpx;
		background-color: #ffffff;
		.cm-content {
			padding: 32rpx 36rpx 58rpx;
			.cm-jer {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				.cmj-label {
					color: rgba(0, 0, 0, 0.65);
					margin-right: 20rpx;
				}
				.cmj-value {
					color: rgba(0, 0, 0, 0.85);
				}
			}
			.cm-tips {
				margin-top: 42rpx;
				background-color: rgba(255, 242, 242, 1);
				border: 2rpx solid rgba(255, 222, 222, 1);
				box-sizing: border-box;
				padding: 32rpx 40rpx;
				border-radius: 20rpx;
				display: flex;
				.cmt-tag {
					width: 10px;
					height: 10rpx;
					border-radius: 5px;
					background-color: rgba(207, 26, 27, 1);
					margin-right: 16rpx;
					margin-top: 16rpx;
				}
				.cmt-text {
					color: rgba(0, 0, 0, 0.65);
					font-size: 13px;
					line-height: 23px;
				}
			}
		}
	}
	
	// 标题
	.c-title {
		box-sizing: border-box;
		padding: 32rpx 36rpx;
		color: rgba(0, 0, 0, 0.85);
		text-shadow: 0 0 0.1px currentColor;
	}
	
	.cm-border {
		margin-top: 20rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 32rpx 44rpx;
		/deep/ .u-steps-item__content {
			margin-left: 22rpx !important;
			margin-bottom: 40rpx !important;
			.u-text__value {
				font-size: 14px !important;
				color: rgba(0, 0, 0, 0.90) !important;
			}
			.u-text__value--tips, .step-slot {
				margin-top: 10rpx !important;
				font-size: 12px !important;
				color: rgba(0, 0, 0, 0.60) !important;
			}
			.custom-slot {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.90);
				line-height: 20px;
				margin-bottom: 6rpx;
			}
		}
		/deep/ .u-steps-item:nth-last-child(1) .u-steps-item__content {
			margin-bottom: 0 !important;
		}
		
		// 步骤条选中样式
		/deep/ .csi-item-line {
			.u-steps-item__line {
				background-color: #CF1A1B !important;
			}
			.u-steps-item__wrapper__dot {
				background-color: #CF1A1B !important;
			}
		}
	}

}
</style>
